!(function ($) {
  //获取地址栏sid,传递给后端，后端返回和sid对应的数据。
  let sid = location.search.substring(1).split("=")[1];
  if (!sid) {
    sid = 1;
  }

  $.ajax({
    url: "http://localhost/js2112/dongfang/php/detail.php",
    data: {
      sid,
    },
    dataType: "json",
  }).then(function (resData) {
    // 赋值操作
    $(".wrap #spic img").attr("src", resData.goods_img);
    $(".wrap #bpic").attr("src", resData.goods_img);
    $(".pv_shop_detail_title h1").html(resData.goods_title);
    $(".price").html("￥" + resData.goods_price);
    // 渲染小图列表
    let arrPic = resData.goods_smallpic.split(",");
    let str = "";
    $.each(arrPic, function (index, value) {
      str += `
                <li>
                    <img src="${value}"/>
                </li>
            `;
    });
    $("#list ul").html(str);
  });

  // 2.放大镜效果
  const wrap = $(".wrap");
  const spic = $("#spic");
  const sf = $("#sf");
  const bpic = $("#bpic");
  const bf = $("#bf");
  const moveUl = $("#list ul");
  spic.hover(
    function () {
      sf.css("visibility", "visible");
      bf.css("visibility", "visible");

      //     // 计算小放的尺寸
      sf.width((bf.width() * spic.width()) / bpic.width());
      sf.height((bf.height() * spic.height()) / bpic.height());
      // 计算比例
      let bili = bpic.width() / spic.width();

      spic.on("mousemove", function (ev) {
        let sfleft = ev.pageX - wrap.offset().left - sf.width() / 2;
        let sftop = ev.pageY - wrap.offset().top - sf.height() / 2;
        if (sfleft <= 0) {
          sfleft = 0;
        } else if (sfleft >= spic.width() - sf.width()) {
          sfleft = spic.width() - sf.width();
        }
        if (sftop <= 0) {
          sftop = 0;
        } else if (sftop >= spic.height() - sf.height()) {
          sftop = spic.height() - sf.height();
        }
        sf.css({
          left: sfleft,
          top: sftop,
        });

        //大图跟着移动
        bpic.css({
          left: -bili * sfleft,
          top: -bili * sftop,
        });
      });
    },
    function () {
      sf.css("visibility", "hidden");
      bf.css("visibility", "hidden");
    }
  );

  // 点击小图列表，切换小图和大图的图片 - 渲染的元素，添加事件委托

  $("#list ul").on("click", "li", function () {
    let url = $(this).find("img").attr("src");
    spic.find("img").attr("src", url); //获取的图片地址给小图
    bpic.attr("src", url); //获取的图片地址给大图
  });

  //3.小图列表左右箭头的操作 - 移动一张
  let num = 6;
  $("#right").on("click", function () {
    let liwidth = $("#list ul li").eq(0).outerWidth(true);
    let listlen = $("#list ul li").length;
    if (num < listlen) {
      num++;
      if (num === listlen) {
        //隐藏右箭头
        $(this).css("color", "#fff");
      }
      $("#left").css("color", "#333");
    }
    moveUl.animate({
      left: -liwidth * (num - 6),
    });
  });

  $("#left").on("click", function () {
    let liwidth = $("#list ul li").eq(0).outerWidth(true);
    let listlen = $("#list ul li").length;
    if (num > 6) {
      num--;
      if (num === 6) {
        //隐藏右箭头
        $(this).css("color", "#fff");
      }
      $("#right").css("color", "#333");
    }
    moveUl.animate({
      left: -liwidth * (num - 6),
    });
  });
  //   3.购物车

  $("#qty").on("input", function () {
    let reg = /^[1-9]{1}$/;
    if ($("#qty").val() > 9) {
      $(this).val(9);
      alert("该类型商品单笔订单最多只可订购9件");
    } else if (!reg.test($(this).val())) {
      $(this).val(1);
    }
  });

  let cookieobj = {};

  $(".addtocart").on("click", function () {
    if (cookie.get("cookiegoods")) {
      cookieobj = JSON.parse(cookie.get("cookiegoods"));
    }
    if (Object.keys(cookieobj).includes("goods_" + sid)) {
      let num1 = +$("#qty").val();
      let num2 = +cookieobj["goods_" + sid];
      cookieobj["goods_" + sid] = num1 + num2;
    } else {
      let num = $("#qty").val();
      cookieobj["goods_" + sid] = num;
    }
    cookie.set("cookiegoods", JSON.stringify(cookieobj), 7);
    alert("加入购物车");
  });
})(jQuery);
